import MagicAlert from './magic-alert.vue'
import MagicConfirm from './magic-confirm.vue'
import MagicDialog from './magic-dialog.vue'
import { createApp, h } from 'vue'

const MagicAlertProxy = function (options) {
  const app = createApp({
    render() {
      return h(MagicAlert, options)
    }
  })
  const container = document.createElement('div')
  document.getElementsByClassName('ma-container')[0].appendChild(container)
  const instance = app.mount(container)
  instance.value = true
  return instance
}

const MagicConfirmProxy = function (options) {
  const app = createApp({
    render() {
      return h(MagicConfirm, options)
    }
  })
  const container = document.createElement('div')
  document.getElementsByClassName('ma-container')[0].appendChild(container)
  const instance = app.mount(container)
  instance.value = true
  return instance
}

const MagicDialogProxy = function (options) {
  const app = createApp({
    render() {
      return h(MagicDialog, options)
    }
  })
  const container = document.createElement('div')
  document.getElementsByClassName('ma-container')[0].appendChild(container)
  const instance = app.mount(container)
  instance.value = true
  return instance
}

function install(app) {
  app.config.globalProperties.$magicAlert = MagicAlertProxy
  app.config.globalProperties.$magicConfirm = MagicConfirmProxy
  app.config.globalProperties.$magicDialog = MagicDialogProxy
}

const modal = {
  magicAlert: MagicAlertProxy,
  magicConfirm: MagicConfirmProxy,
  magicDialog: MagicDialogProxy
}

export default {
  install
}

export { modal }
